<template>
  <div class="account-data f-cb">
    <div class="account-data-left fl f-cb">
      <!-- 0：待审核 2 审核失败 3 待完善 -->
      <div v-if="IsOpen == 0">
        <ul class="f-cb lists">
          <li v-for="(item, index) in list" :key="index">
            <img :src="item.icon" alt="" class="icon" />
            <h2>{{ item.title }}</h2>
            <p>{{ item.content }}</p>
          </li>
        </ul>
        <a
          href="javascript:;"
          class="openAccount"
          @click="openAccount"
          >{{ $t("account.account_data.56hps01w8dg0") }}</a
        >
      </div>
      <div v-else>
        <h1>
          {{
            type == 1
              ? $t("account.account_data.56hps56w8dg0")
              : type == 2
              ? $t("account.account_data.56hp68gw8dg0")
              : $t("account.account_data.5658ps0w8dg0")
          }}{{
            assetType == 1
              ? $t("account.account_data.56hps01ss1g0")
              : $t("account.account_data.56hps0sq8dg0")
          }}({{ data.openNum }})
        </h1>
        <div class="info-title f-cb">
          <div class="left fl">
            <!-- 港股：HKD,美股：USD,沪深：CNH -->
            <p>
              {{
                type == 1
                  ? $t("m.shMoney")
                  : type == 2
                  ? $t("m.hkMoney")
                  : $t("m.usMoney")
              }}{{ $t("m.AssetsText") }}·{{
                type == 1 ? "CNH" : type == 2 ? "HKD" : "USD"
              }}
              <span class="AccountTips" @click="DescriptionShow = true"></span>
              <span
                class="AccountOpen"
                :class="AccountOpenCloseShow ? '' : 'close'"
                @click="AccountOpenClose('AccountOpenCloseShow')"
              ></span>
            </p>
            <h2 v-if="AccountOpenCloseShow">
              <span class="thound" v-if="data.totalAsset">{{
                parseFloat(data.totalAsset).toFixed(2) | formatNumberRgx
              }}</span>
              <span v-else class="thound">0.00</span>
            </h2>
            <h2 v-else>*****</h2>
          </div>
          <div class="fr right">
            <p>{{ $t("m.FloatPL") }}</p>
            <h2
              v-if="AccountOpenCloseShow"
              :class="
                data.totalProfitRate > 0
                  ? 'red'
                  : data.totalProfitRate < 0
                  ? 'green'
                  : ''
              "
            >
              <!-- {{data.totalProfit > 0?'+':''}}{{data.totalProfit? parseFloat(data.totalProfit).toFixed(2):'0.00'}}  -->
              <span class="thound" v-if="data.totalProfit"
                >{{ data.totalProfit > 0 ? "+" : ""
                }}{{
                  parseFloat(data.totalProfit).toFixed(2) | formatNumberRgx
                }}</span
              >
              <span v-else class="thound">0.00</span>
              <span
                >{{ data.totalProfitRate > 0 ? "+" : ""
                }}{{
                  data.totalProfitRate
                    ? (data.totalProfitRate * 100).toFixed(2)
                    : "0.00"
                }}%</span
              >
            </h2>
            <h2 v-else>*****</h2>
          </div>
        </div>
        <ul class="infolist f-cb">
          <li>
            {{ $t("m.PositionValue") }}
            <span class="fr" v-if="AccountOpenCloseShow">
              <i v-if="data.totalMarketValue">
                {{
                  parseFloat(data.totalMarketValue).toFixed(2) | formatNumberRgx
                }}
              </i>
              <i v-else>0.00</i>
            </span>
            <span class="fr" v-else>*****</span>
          </li>
          <li>
            {{ $t("m.FinancingAmount") }}
            <span class="fr" v-if="AccountOpenCloseShow">
              <i v-if="data.maxFinanceBalance">
                {{
                  parseFloat(data.maxFinanceBalance).toFixed(2) | formatNumberRgx
                }}
              </i>
              <i v-else>0.00</i>
            </span>
            <span class="fr" v-else>*****</span>
          </li>
          <li>
            {{ $t("m.CashBalance") }}
            <span class="fr" v-if="AccountOpenCloseShow">
              <i v-if="data.balance">
                {{
                  parseFloat(data.balance).toFixed(2) | formatNumberRgx
                }}
              </i>
              <i v-else>0.00</i>
            </span>
            <span class="fr" v-else>*****</span>
          </li>
          <li>
            {{ $t("m.Frozen_funds") }}
            <span class="fr" v-if="AccountOpenCloseShow">
              <i v-if="data.freezeBalance">
                {{
                  parseFloat(data.freezeBalance).toFixed(2) | formatNumberRgx
                }}
              </i>
              <i v-else>0.00</i>
            </span>
            <span class="fr" v-else>*****</span>
          </li>
          <li>
            {{ $t("m.Maximumleverage") }}
            <span class="fr" v-if="AccountOpenCloseShow"
              >{{ data.maxFinanceMultiple }}{{ $t("m.double") }}</span
            >
            <span class="fr" v-else>*****</span>
          </li>
          <li>
            {{ $t("m.AmountDeducted") }}
            <span class="fr" v-if="AccountOpenCloseShow">
              <i v-if="data.unsettledInterest">
                {{
                  parseFloat(data.unsettledInterest).toFixed(2) | formatNumberRgx
                }}
              </i>
              <i v-else>0.00</i>
            </span>
            <span class="fr" v-else>*****</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="fr account-data-right f-cb">
      <h2>{{ $t("account.account_data.56hpr0b6y8c0") }}</h2>
      <ul class="list f-cb on">
        <li @click="capitalClick(1)">
          <img :src="DepositImg" alt="" />
          <p>{{ $t("account.account_data.56hpr0b6zkc0") }}</p>
        </li>
        <li @click="capitalClick(2)">
          <img :src="TransferOutImg" alt="" />
          <p>{{ $t("account.account_data.56hpr0b6zw40") }}</p>
        </li>
        <li @click="exchangeDia">
          <img :src="CurrencyImg" alt="" />
          <p>{{ $t("account.account_data.56hpr0b705s0") }}</p>
        </li>
        <li @click="CapitalFlowClick">
          <img :src="CapitalImg" alt="" />
          <p>{{ $t("account.account_data.56hpr0b70eo0") }}</p>
        </li>
      </ul>
      <h2>{{ $t("account.account_data.56hpr0b70s00") }}</h2>
      <ul class="list f-cb">
        <li @click="chargeDia">
          <img :src="ProgrammeImg" alt="" />
          <p>{{ $t("account.account_data.56hpr0b711k0") }}</p>
        </li>
        <!-- <li @click="dayMonthShow = true">
          <img :src="StatementImg" alt="" />
          <p>{{$t('account.account_data.56hpr0b71a80')}}</p>
        </li> -->
        <li @click="calculationShow = true">
          <img :src="CalculatorImg" alt="" />
          <p>{{ $t("account.account_data.56hpr0b71jg0") }}</p>
        </li>
        <li @click="quotation">
          <img :src="quotationImg" alt="" />
          <p>{{ "行情商城" }}</p>
        </li>
      </ul>
    </div>
    <!-- 佣金计算器 -->
    <calculation :show="calculationShow" @close="ClosePopup"></calculation>
    <!-- 日月结单 -->
    <dayMonth :show="dayMonthShow" @close="ClosePopup"></dayMonth>
    <!-- 收费方案 -->
    <charging
      ref="charging"
      :show="chargingShow"
      @close="ClosePopup"
    ></charging>
    <!-- 货币兑换 -->
    <ExchangeDialog
      ref="exchange"
      @CapitalFlowClick="CapitalFlowClick"
      :show="exchangeShow"
      @close="ClosePopup"
    ></ExchangeDialog>
    <!-- 资金流水 -->
    <capital-flow
      ref="flows"
      :show="capitalflowshow"
      @close="ClosePopup"
      :type="CapitalType"
    ></capital-flow>
    <!-- 行情商城 -->
    <market-mall
      ref="mall"
      :show="mallShow"
      @close="ClosePopup"
    ></market-mall>
    <!-- 账户字段说明 -->
    <el-dialog
      :visible.sync="DescriptionShow"
      width="500px"
      :append-to-body="true"
      @close="ClosePopup('DescriptionShow')"
      custom-class="Description"
    >
      <h2>{{ $t("account.account_data.56hpr0b71sg0") }}</h2>
      <ul class="f-cb">
        <li v-for="(item, index) in DescriptionList" :key="index">
          <h3>{{ item.title }}</h3>
          <p>{{ item.content }}</p>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import {get_account_index} from '@/assets/js/API/user.js'
import CapitalFlow from "@/components/account_dialog/capital_flow";
import calculation from "../account_dialog/calculation_dialog";
import dayMonth from "../account_dialog/dayMonth_dialog";
import charging from "../account_dialog/charging_dialog";
import ExchangeDialog from "../account_dialog/ExchangeDialog";
import MarketMall from "../account_dialog/market_mall";

export default {
  components: {
    calculation,
    dayMonth,
    charging,
    ExchangeDialog,
    CapitalFlow,
    MarketMall
  },
  props: ["data", "type"],
  data() {
    return {
      IsOpen: 1, // 0：待审核 1 审核成功 2 审核失败 3 待完善 4账户变更,5:变更成功，6:变更失败
      list: [
        {
          icon: require("@/assets/img/icon_tzqq.png"),
          title: this.$i18n.t("m.warning2"),
          content: this.$i18n.t("m.warning5"),
        },
        {
          icon: require("@/assets/img/icon_cdyj.png"),
          title: this.$i18n.t("m.warning3"),
          content: this.$i18n.t("m.warning6"),
        },
        {
          icon: require("@/assets/img/icon_jsjy.png"),
          title: this.$i18n.t("m.warning4"),
          content: this.$i18n.t("m.warning7"),
        },
      ],
      DepositImg: require("@/assets/img/icon_crzj.png"),
      TransferOutImg: require("@/assets/img/icon_zczj.png"),
      CurrencyImg: require("@/assets/img/icon_hbdh.png"),
      CapitalImg: require("@/assets/img/icon_zjls.png"),
      ProgrammeImg: require("@/assets/img/icon_sffa.png"),
      StatementImg: require("@/assets/img/icon_ryjd.png"),
      CalculatorImg: require("@/assets/img/icon_yjjsq.png"),
      quotationImg: require("@/assets/img/quotation.png"),
      calculationShow: false, // 佣金计算器对话框开关
      dayMonthShow: false, // 日月结单对话框开关
      chargingShow: false, // 收费方案对话框开关
      exchangeShow: false, // 货币兑换对话框开关
      capitalflowshow: false, // 资金流水
      mallShow: false, // 行情商城
      CapitalType: 0,
      AccountOpenCloseShow: true,
      DescriptionShow: false,
      DescriptionList: [
        {
          title: this.$t("account.account_data.56hpr0b72100"),
          content: this.$t("account.account_data.56hpr0b72a00"),
        },
        {
          title: this.$t("account.account_data.56hpr0b72is0"),
          content: this.$t("account.account_data.56hpr0b72rg0"),
        },
        {
          title: this.$t("account.account_data.56hpr0b730g0"),
          content: this.$t("account.account_data.56hpr0b73ck0"),
        },
        {
          title: this.$t("account.account_data.56hpr0b73rs0"),
          content: this.$t("account.account_data.56hpr0b74340"),
        },
        {
          title: this.$t("account.account_data.56hpr0b74dc0"),
          content: this.$t("account.account_data.56hpr0b74mc0"),
        },
        {
          title: this.$t("account.account_data.56hpr0b74xc0"),
          content: this.$t("account.account_data.56hpr0b75500"),
        },
        {
          title: this.$t("account.account_data.56hpr0b75cg0"),
          content: this.$t("account.account_data.56hpr0b75iw0"),
        },
      ],
    };
  },
  mounted() {
    this.accountInit();
  },
  methods: {
    //点击显示或隐藏文字
    AccountOpenClose(msg) {
      this[msg] = !this[msg];
      this.$store.dispatch("SetCloseOpen", this.AccountOpenCloseShow);
    },
    //关闭弹框
    ClosePopup(msg) {
      this[msg] = false;
    },
    async accountInit() {
      const res = await get_account_index();
      if(res.code !=1) return this.$message.error(res.msg);
      if (res.data.isOpen == false) sessionStorage.setItem("isOpen", 0);
      else sessionStorage.setItem("isOpen", 1);
      this.IsOpen = sessionStorage.getItem("isOpen");
    },
    // 打开货币兑换对话框
    exchangeDia() {
      if (this.IsOpen == 0)
        return this.$message({
          message: this.$t("account.account_data.56hpr0b75ps0"),
          type: "warning",
        });
      else {
      this.exchangeShow = true;
      // 获取货币兑换信息
      this.$refs.exchange.getType();
      }
    },
    // 获取收费方案
    chargeDia() {
      this.chargingShow = true;
      this.$refs.charging.getCharge();
    },
    // 打开行情商城并跳入指定市场
    quotation() {
      this.mallShow = true;
      this.$refs.mall.initCharge(this.accountType);
    },
    //存入或转出资金打开
    capitalClick(type) {
      this.$message({
        message: this.$t("account.account_data.56hpr0b75wc0"),
        type: "warning",
        duration: 1000,
      });
    },
    //打开pc开户
    openAccount() {
      var openUrl = JSON.parse(localStorage.getItem("tradeInit")).openUrl;
      window.open(openUrl, "_blank");
    },
    //打开资金流水弹框
    CapitalFlowClick(type) {
      if (this.IsOpen == 0){
        return this.$message({
          message: this.$t("account.account_data.56hpr0b765s0"),
          type: "warning",
        });
      }
      this.capitalflowshow = true;
      this.$refs.flows.getCapitalList();
      this.CapitalType = type;
    },
  },
  watch: {
    // data(val) {
    //   console.log(val,'assetType_data');
    // },
  },
  computed: {
    assetType() {
      return this.$store.state.index.assetType;
    },
    accountType() {
      return this.$store.state.index.accountType;
    },
  },
};
</script>
<style lang="less">
.account-data {
  border-bottom: 1px solid @LightBorderLine;
  width: 100%;
  position: relative;
  .account-data-left {
    width: 50%;
    // min-width: 645px;
    overflow: auto;
    .lists {
      width: 100%;
      padding: 33px 0 24px;
      text-align: center;
      li {
        width: 33.33%;
        float: left;
        .icon {
          max-width: 74px;
          width: 80%;
          margin-bottom: 5px;
        }
        h2 {
          font-size: 12px;
          color: @fff;
          line-height: 22px;
        }
        p {
          color: @fbSix;
          line-height: 22px;
          font-size: 12px;
        }
      }
    }
    .openAccount {
      width: 150px;
      line-height: 30px;
      height: 30px;
      border-radius: 3px;
      margin: 0 auto 30px;
      display: block;
      background: @hoverColor;
      color: @fff;
      font-size: 12px;
      text-align: center;
    }
    h1 {
      font-size: 12px;
      color: @hoverColor;
      line-height: 30px;
      border-bottom: 1px solid @LightBorderLine;
      padding: 0 20px;
      width: 100%;
      box-sizing: border-box;
      -moz-box-sizing: border-box; /* Firefox */
      -webkit-box-sizing: border-box; /* Safari */
    }
    .info-title {
      padding: 15px 20px 7px;
      width: 100%;
      box-sizing: border-box;
      -moz-box-sizing: border-box; /* Firefox */
      -webkit-box-sizing: border-box; /* Safari */
      .AccountTips {
        width: 15px;
        height: 15px;
        display: inline-block;
        margin-left: 3px;
        cursor: pointer;
        background: url(~@/assets/img/icon_bbxxh.png) no-repeat center;
        background-size: 100% auto;
        position: relative;
        top: 2px;
      }
      .AccountOpen {
        width: 15px;
        height: 15px;
        display: inline-block;
        margin-left: 3px;
        cursor: pointer;
        background: url(~@/assets/img/accopen.png) no-repeat center;
        background-size: 100% auto;
        position: relative;
        top: 2px;
      }
      .AccountOpen.close {
        background: url(~@/assets/img/aclose.png) no-repeat center;
        background-size: 100% auto;
      }
      p {
        font-size: 12px;
        color: @fbSix;
        line-height: 23px;
      }
      h2 {
        font-size: 30px;
        color: @fff;
        line-height: 45px;
        .thound {
          font-size: 30px;
          color: @fff;
          line-height: 45px;
          margin-right: 10px;
        }
        span {
          font-size: 14px;
        }
      }
    }
    .infolist {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      -moz-box-sizing: border-box; /* Firefox */
      -webkit-box-sizing: border-box; /* Safari */
      li {
        float: left;
        color: @fbSix;
        font-size: 12px;
        line-height: 32px;
        width: calc((100% - 60px) / 3);
        span {
          color: @fff;
          i{ font-style:normal} 
        }
      }
      li:nth-child(3n - 1) {
        margin: 0 30px;
      }
    }
  }
  .account-data-right {
    width: 50%;

    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
    h2 {
      font-size: 12px;
      color: @Dark_gray;
      line-height: 30px;
      border-bottom: 1px solid @LightBorderLine;
      padding: 0 20px;
    }
    .list {
      width: 100%;
      li {
        float: left;
        width: 25%;
        cursor: pointer;
        text-align: center;
        padding: 20px 0 9px;
        img {
          height: 26px;
        }
        p {
          font-size: 12px;
          color: @fbSix;
          line-height: 28px;
        }
      }
    }
    .list.on {
      border-bottom: 1px solid @LightBorderLine;
    }
  }
}
.account-data::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  background: @LightBorderLine;
}
.Description {
  margin: 0 !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-dialog__body {
    h2 {
      color: @fff;
      font-size: 14px;
      line-height: 24px;
      padding-bottom: 15px;
      padding-left: 15px;
    }
    li {
      width: 100%;
      padding-left: 15px;
      margin-bottom: 10px;
      position: relative;
      h3 {
        color: @fff;
        font-size: 12px;
        line-height: 22px;
        margin-bottom: 5px;
      }
      p {
        font-size: 12px;
        color: @fbSix;
        line-height: 20px;
      }
    }
    li:after {
      content: "";
      width: 1px;
      height: 14px;
      background: @blue;
      display: block;
      position: absolute;
      top: 4px;
      left: 0;
    }
  }
}
@media screen and (max-width: 1440px) {
  .account-data .account-data-left .infolist li:nth-child(3n - 1) {
    margin: 0;
  }
  .account-data .account-data-left .infolist li:nth-child(2n) {
    margin-left: 10px;
  }
  .account-data .account-data-left .infolist li {
    width: calc((100% - 10px) / 2);
  }
}
</style>